$(function() {
    // var list = [{ title: "今天吃8个馒头", state: false }];
    // 转为字符串
    // localStorage.setItem("list", JSON.stringify(list));
    // 字符串转为对象

    show();

    $("#txt").on("keypress", function(e) {
        if (e.keyCode == 13) {
            var local = getData();
            // alert(local);
            var txt = $(this).val();
            if (txt == "") {
                alert("请输入数据");
            } else {
                local.push({ title: txt, state: false });
            }
            saveData(local);
            // var li = $("<li><input type='checkbox'><p>" + txt + "</p><button></button></li>");
            // $(".todolist")
            $(this).val("");

            show();
        }
    })
    $(".todolist,.donelist").on("click", "input", function() {
        var data = getData();
        var index = $(this).siblings("button").attr("index");
        console.log(index);
        console.log(data[index].state);
        console.log($(this).prop("checked"));
        data[index].state = $(this).prop("checked");
        saveData(data);
        show();
    })

    $(".todolist,.donelist").on("click", "button", function() {
        var data = getData();
        var index = $(this).attr("index");
        data.splice(index, 1);
        saveData(data);
        show();
    })

    function saveData(data) {
        localStorage.setItem("list", JSON.stringify(data));
    }
    //读取本地数据
    function getData() {
        var data = localStorage.getItem("list");
        if (data != null) {
            return JSON.parse(data);
        } else {
            return [];
        }
    }

    function show() {
        var data = getData();
        $(".todolist").empty();
        $(".donelist").empty();
        var todocount = 0;
        var donecount = 0;
        // var li = $("<li><input type='checkbox'><p>" + txt + "</p><button></button></li>");
        $.each(data, function(i, ele) {
            // console.log(ele);
            if (ele.state) {
                $(".donelist").prepend("<li><input type='checkbox' checked='checked'><p>" + ele.title + "</p><button index='" + i + "'></button></li>");
                donecount++;
            } else {
                $(".todolist").prepend("<li><input type='checkbox' ><p>" + ele.title + "</p><button index='" + i + "'></button></li>");
                todocount++;
            }
        })
        $(".todocount").text(todocount);
        $(".donecount").text(donecount);
    }
})